<template>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<div style="height: 40px;background-color: #a2a2a2;">
				<span @click="gotos">演示</span>
				<el-dropdown>
					<span class="el-dropdown-link">
						{{webPages.title}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item,index) in webPageList" :key="index">{{item.title}}
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="layuimini-container">
				<div class="layuimini-main " style="display: flex;">
					<div class="left" id="bignav">
						<div class="layui-card ">
							<div class="layui-card-header">
								<i class="fa fa-warning icon"></i>
								<span>组件</span>
								<i @click="isShowModule" style="float: right;margin-top: 10px;"
									class="el-icon-close"></i>
							</div>
							<div class="layui-card-body">
								<div class="welcome-module">
									<div class="layui-row layui-col-space10">
										<div class="layui-col-xs6 " v-for="(item,index) in webMobulies"
											@dragover="dragover" draggable="true" @dragstart="dragstart(item)">
											<div class="panel layui-bg-number module">
												<div class="panel-body">
													<i class="fa fa-trash-o"></i>
													<div><span>{{item.title}}</span></div>
												</div>
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="contre">
						<el-scrollbar>
							<div class="layui-card">
								<div class="layui-card-body">
									<div v-if="ary.length==0" style="height: 50px;" @drop="dropdss(null,null,0,1)"
										@dragover="allowDrop($event)">
									</div>
									<div v-for="(item, index) in ary" @mouseleave="mousedown('#pageMobulie'+index)"
										@mouseover="mouseover('#pageMobulie'+index)"
										@contextmenu.prevent="onContextmenu" :id="'pageMobulie'+index" class="Header"
										@click="selectMoblie(item, index),alterType('#pageMobulie'+index)">
										<div style="position: relative;">
											<div style="position: absolute;z-index: 99;width: 100%;height: 100%;">
												<div :id="'top'+index" @drop="dropdss('#top'+index,item,index,0)"
													@dragover="allowDrop($event)" @dragenter="drag1('#top'+index)"
													@dragleave="drag2('#top'+index)" style="height: 50%;"></div>
												<div :id="'below'+index" @drop="dropdss('#below'+index,item,index,1)"
													@dragover="allowDrop($event)" @dragenter="drag1('#below'+index)"
													@dragleave="drag2('#below'+index)" style="height: 50%;"></div>
											</div>
											<component :is="item.app" :key="item.id" :msgJsonApp="ary[index].msgJson">
											</component>
										</div>
									</div>
								</div>
							</div>
						</el-scrollbar>
					</div>
					<div class="right">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3>{{designData.title}}</h3>
							</div>
							<div class="layui-card-body">
								<component :is="designData.app" ref="property" :key="designData.id" :msgJsonApp="designData">
								</component>
							</div>
						</div>
						<el-button style="width: 100%;float: right;" @click="SaveClick">保存</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import api from "@/api/system/webDesign.js"
	import apiMobulie from "@/api/system/webMobulie.js"

	import {getUser} from "@/utils/auth.js"
	export default {
		data() {
			return {
				//组件编辑收缩框
				activeNames: '0',
				//是否显示组件框
				isCollapse: true,
				//右边显示的所有组件
				webMobulies: [],
				//当前页面显示的组件
				webMobulieList: [],
				webMobulieInitial:[],
				//鼠标拖动的组件
				webMobulie: [],
				webPageList: [],
				//当前页面
				webPages: {},
				ary: [],
				pitchOnMoblie: null,
				designData: {
					title: "",
					contre: {}
				},
				//组件数据
				msgJson: [],
				property: {}
			};
		},
		mounted() {
			this.begin()
			this.mobulies()
		},
		methods: {
			Json(data) {
				return JSON.parse(data)
			},
			mouseover(data) {
				$(".Header").removeClass("hover")
				$(data).addClass("hover")
			},
			mousedown(data) {
				$(".Header").removeClass("hover")
			},
			//点击改变页面组件边框
			alterType(data) {
				$(".Header").removeClass("frame")
				$(data).addClass("frame")
			},
			//鼠标右键删除组件
			onContextmenu(event) {
				if (this.designData.title) {
					this.$contextmenu({
						items: [{
							label: "删除",
							onClick: () => {
								let is = false;
								this.webMobulieList.forEach((item, index) => {
									if (item.webComposing.id == this.designData.id) {
										this.webMobulieList.splice(index, 1);
										is = true;
										this.requireRrr();
									}
									if (is) {
										this.webMobulieList[index].state = 2;
									}
									$(".Header").removeClass("frame")
								})
							}
						}, {
							label: "前进(F)",
							disabled: true,
						}],
						event, // 鼠标事件信息
						customClass: "custom-class", // 自定义菜单 class
						zIndex: 99, // 菜单样式 z-index
						minWidth: 230 // 主菜单最小宽度
					});
					return true;
				}

			},
			allowDrop(ev) {
				ev.preventDefault();
			},
			//将组件拖入页面组件上半部分时
			drag1(data) {
				$(data).css("background-color", " rgb(0,0,0,0.4)")
			},
			//将组件离开页面组件上半部分时
			drag2(data) {
				$(data).css("background-color", " rgb(0,0,0,0)")
			},
			//拖动组件松开鼠标进行赋值
			dragstart(item) {
				this.webMobulie = item
			},
			//改变鼠标拖动时的光标图标
			dragover(event) {
				event.preventDefault()
				event.dataTransfer.dropEffect = 'copy '
			},
			//将组件嵌入页面中
			dropdss(data, item, index, is) {
				//鼠标松开时，在重新修改颜色，不然会有问题
				$(data).css("background-color", " rgb(0,0,0,0)")
				//this.webMobulie鼠标拖动过来的组件
				//this.webMobulieList页面显示的所有组件
				let list = {
					pageId: this.$route.query.pageId,
					moduleId: this.webMobulie.id,
					msgJson: this.webMobulie.msgJson
				}
				this.webMobulie.webComposing = list
				this.webMobulie.state = 1
				this.webMobulieList.splice(index+is, 0, this.webMobulie)
				this.requireRrr()
			},
			begin() {
				let user = getUser()
				
				let data = {
					projectId: user.projectId
				}
				//请求用户所在协会的所有页面
				api.list(data).then(res => {
					this.webPageList = res.data
					this.webPages = res.list[0]
					//请求该页面的所有组件
					api.Modulelist(user.projectId, this.$route.query.pageId).then(resList => {
						this.webMobulieList = []
						resList.list.forEach(data => {
							let list = data;
							list.state = 0 //状态0未修改的，1新添加的，2顺序改变的
							this.webMobulieList.push(list)
						})
						this.requireRrr()
					})
				})


			},
			//请求可用的所有组件
			mobulies() {
				apiMobulie.ModuleList().then(res => {
					this.webMobulies = res
				})
			},
			//循环请求的组件，将他注册到页面中
			requireRrr() {
				let arr = []
				this.webMobulieList.forEach(data => {
					//得到该组件的json属性
					this.msgJson.push(JSON.parse(data.msgJson))
					let list = {}
					list.app = require(`../../../components/${data.name}.vue`).default
					list.title = data.title
					list.id = data.webComposing.id
					list.msgJson = data.webComposing.msgJson
					list.propertyPath = data.propertyPath
					arr.push(list)

				})
				this.ary = arr
			},
			//选中组件
			selectMoblie(data, index) {
				this.designData={}
				this.designData.title = data.title
				this.designData.id = data.id?data.id:-1
				this.designData.index = index
				this.designData.subscript = index
				this.designData.msgJson = data.msgJson
				this.designData.isNot = false
				var propertyPath = data.propertyPath;
				this.designData.app = require(`../../../components/${propertyPath}.vue`).default
			},
			//组件属性保存
			SaveClick() {
				// let list = {
				// 	id: this.designData.id == null ? 0 : this.designData.id,
				// 	msgJson: JSON.stringify(this.designData.contre)
				// }
				var arr = []
				this.ary.forEach((res,index) => {
					var list = {}
					list.id = res.id
					list.msgJson = res.msgJson
					list.propertyPath = res.propertyPath
					list.title = res.title
					arr.push(list)
				})
				console.log(this.webMobulieList)
				let data = {
					pageId: this.$route.query.pageId,
					webComposingVo: arr,
					webModuleVoList: this.webMobulieList
				}
				api.ModuleUpdate(data).then(res => {
					const h = this.$createElement;
					if (!res.data) {
						this.$message({
							message: h('p', null, [
								h('span', null, "提交成功"),
								h('i', {
									style: 'color: teal'
								}, 'VNode')
							])
						});
					}
				})
				this.submitJson()
			},
			//导航添加
			append(data) {
				const newChild = {
					id: data.id++,
					label: 'testtest',
					children: []
				};
				if (!data.children) {
					this.$set(data, 'children', []);
				}
				data.children.push(newChild);
				this.submitJson()
			},
			//添加一级导航
			addnav() {
				const newChild = {
					id: 1,
					label: 'testtest',
					children: [],
					rank: 1
				};
				this.designData.contre.title.push(newChild)
				this.submitJson()
			},
			//删除导航
			remove(node, data) {
				const parent = node.parent;
				const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				children.splice(index, 1);
				this.submitJson()
			},
			//保存组件的json数据
			submitJson() {
				this.msgJson[this.designData.subscript] = this.designData.contre
			},
			isShowModule() {
				this.isCollapse = !this.isCollapse
				var width = this.isCollapse ? 400 : 0
				$(".left").animate({
					width: width + 'px'
				});

				if (this.isCollapse) {
					setTimeout(function() {
						$(".left span,.fa").show(500)
					}, 200);

					$(".left").css("border", '1px solid #f6f6f6');
				} else {
					$(".left span,.fa").hide()
					$(".left").css("border", '0px solid #f6f6f6');
				}
			},
			gotos() {
				this.$router.push('/association/'+getUser().projectId+'/'+this.$route.query.pageId)
			},
			fatherMethod(newValue){
				this.ary[newValue.index].msgJson = JSON.stringify(newValue)
				var arr = []
				arr = JSON.parse(JSON.stringify(this.webMobulieList));
				arr[newValue.index].webComposing.msgJson = JSON.stringify(newValue)
				
				this.webMobulieList=arr
				if(newValue.id>0){
					this.webMobulieList[newValue.index].state = 2
				}else{
					this.webMobulieList[newValue.index].state = 1
				}
			}
		}
	}
	// window.onscroll = function() {
	// 	let nav = document.getElementById("bignav");

	// 	window.addEventListener('scroll', function(e) {
	// 		if (window.pageYOffset > nav.offsetTop) {
	// 			nav.style.top = '0px'
	// 		} else {
	// 			nav.style.position = 'fixed'
	// 			nav.style.position = 'static'
	// 		}
	// 	})
	// }
	/*解决浏览器兼容问题*/
	function get_scrollTop_of_body() {
		var scrollTop;
		if (typeof window.pageYOffset != 'undefined') { //pageYOffset指的是滚动条顶部到网页顶部的距离 
			scrollTop = window.pageYOffset;
		} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
			scrollTop = document.documentElement.scrollTop;
		} else if (typeof document.body != 'undefined') {
			scrollTop = document.body.scrollTop;
		}
		return scrollTop;
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	.hover {
		border-style: dashed;
		border-width: 1px;
		border-color: #ff7800;
		//box-shadow: 0 2px 12px 0 rgb(0,0,0,0.3)
	}

	.frame {
		border: 1px solid #ff7800;
	}

	.contre {
		margin: 0px 20px 0px 20px;
		width: 100%;
		height: 100%;
		border: 1px solid rgb(0, 0, 0, 0.2);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2)
	}

	.module {
		width: 100%;
		height: 100px;
		text-align: center;
		justify-content: center;
		
        border-radius: 20px;
		.panel-body i {
			margin-top: 20px;
			font-size: 20px;
		}
	}

	.module:active {
		cursor: auto;
	}

	.module:hover {
		color: #FFFFFF;
		border-radius: 20px;
		background-color: #ff7800;

	}

	.moduleButton {
		margin: 10px 0px 5px 0px;
		float: right;
	}

	.custom-class .menu_item__available:hover,
	.custom-class .menu_item_expand {
		background: #ffecf2 !important;
		color: #ff4050 !important;
	}

	.left {
		border: 1px solid rgb(0, 0, 0, 0.3);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		height: 100%;
		width: 20%;
	}

	.right {
		margin-left: auto;
		width: 28%;
	}

	.right-down {
		margin-bottom: 10px;
		padding: 4px;
		border: 1px rgb(0, 0, 0, 0.1) solid;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.right-down .el-collapse-item__header {
		border-bottom: 0px;
	}

	.contreMoblie {
		width: 100%;
	}

	.nav-input {
		border: none;
		border-bottom: 1px solid rgb(0, 0, 0, 0.3)
	}
</style>
